<template>
  <div class="link-container layout-padding flex-column-center">
    <img class="link-img" src="@/assets/link.svg" />
    <div class="link-wrap">
      <h3>即将跳转到外部网站[{{ state.title }}]</h3>
      <div>您将要访问的链接不属于 {{ hostname }}，请关注您的帐号安全！</div>
      <div> {{ state.link }} </div>
      <el-button @click="handleOpenPage" class="link-btn" round>继续前往访问</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive,watch } from "vue";
import { useRoute } from "vue-router";
import { validateURL } from '@/utils/validate';
const route = useRoute()
const state = reactive({
    title: '', // 链接标题
    link: '', // 目标跳转url
})
// 当前项目域名
const hostname = window.location.hostname;
watch(() => route.path,() => {
    state.title = route.meta?.title || '外链';
    state.link = route.meta?.linkTo || '';
    

},{immediate:true})
const handleOpenPage = () => {
    const {origin, pathname} = window.location;
    // http://localhost:8080 /mengxuegu
    console.log(origin, pathname);
    if (validateURL(state.link)) window.open(state.link);
    else window.open(`${origin}${state.link}`);
    

}
</script>
<style lang="scss" scoped>
.link-container {
  .link-img {
    width: 200px;
  }
  .link-wrap {
    width: 500px;
    border: 1px solid var(--mxg-border-color-light);
    border-radius: 10px;
    padding: 20px;
    line-height: 30px;
    font-size: 15px;
    margin-top: 20px;
    .link-btn {
      float: right;
    }
  }
}
</style>
